<template>
  <div id='left'>
    <template v-if="!loading">
      <p class="title width_300"><img src="@/assets/meng/video03_01.png"><span>商品信息</span></p>
      <section class="s1">
        <div :class="{disable:false}">
          <img :src='response&&response.proLogo' />
          <div v-if="false">已下架</div>
        </div>
        <div>
          <el-tooltip class="item"
                      effect="light"
                      v-if="response"
                      :content="response.proTitle"
                      :hide-after="2000"
                      placement="top"
                      popper-class="mytooltip">
            <p>{{response&&response.proTitle}}</p>
          </el-tooltip>
          <p>
            <span><span v-if="response">￥</span>{{response&&response.proPrice}}</span>
            <span><span v-if="response">￥</span>{{response&&response.proCostPrice}}</span>
            <el-popover placement="bottom"
                        trigger="hover"
                        popper-class="hot_video_popover"
                        v-if="response&&response.profrom==2">
              <vue-qr :size="150"
                      :margin="0"
                      :auto-color="true"
                      v-if="response"
                      :dot-scale="1"
                      :text="response.proCode" />
              <p>【抖音扫码，查看商品】</p>
              <img slot="reference"
                   src="@/assets/meng/hot_video13.png">
            </el-popover>
            <span v-else></span>
            <SourceIcon v-if="response"
                        :sourceid="response.profrom" />
          </p>
        </div>
      </section>
      <section class="s2">
        <span v-if="response&&response.brand">品牌：</span>
        <span v-if="response&&response.brand">{{response.brand}}</span>
        <span>分类：</span>
        <span>{{response&&response.proCategory}}</span>
        <br>
        <!-- <div></div> -->
        <!-- <span class="special">上架时间：</span>
        <span v-if="response">{{response.onlineTime!=''?timestamp(response.onlineTime,'Y-M-D'):'--'}}</span> -->
      </section>
      <section class="s3"
               ref="s3"
               v-if="response&&response.rankList.length!=0">
        <button v-for='(item,index) in response.rankList'
                @click="go_to_page01(item.rankName)"
                :key='index+"data01"'>{{item.rankName}}</button>
      </section>
      <p class="s4"
         @click="is_show_s3=false;$refs.s3.style['max-height']='10000px'"
         v-if="response&&is_show_s3&&response.rankList.length>3">展开<i class="el-icon-arrow-down"></i>
      </p>
      <p class="s4"
         @click="is_show_s3=true;$refs.s3.style['max-height']='129px'"
         v-if="response&&!is_show_s3&&response.rankList.length!=0">收起<i class="el-icon-arrow-up"></i>
      </p>
      <div class="line"></div>

      <p class="title"
         v-if="response&&response.profrom==2&&response01"><img src='@/assets/meng/left01.png'><span class="mr_6">{{response01&&response01.shopTitle}}</span>
        <!-- <el-popover placement="bottom"
                    trigger="hover"
                    popper-class="hot_video_popover">
          <vue-qr :size="150"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="response01&&response01.shopUrl?response01.shopUrl:''" />
          <p>【抖音扫码，查看视频】</p>
          <img slot="reference"
               src="@/assets/meng/hot_video13.png">
        </el-popover> -->
      </p>
      <section class="s5"
               v-if="response&&response.profrom==2&&response01">
        <span>商品体验：</span>
        <span>{{response01&&response01.wordofmouth?response01.wordofmouth:'--'}}</span>
        <span>商家服务：</span>
        <span>{{response01&&response01.serviceattitude?response01.serviceattitude:'--'}}</span>
        <br>
        <div></div>
        <span>物流体验：</span>
        <span>{{response01&&response01.deliveryspeed?response01.deliveryspeed:'--'}}</span>
      </section>
      <p class="title"><img src="@/assets/wang/tdetails/dataimg.png"><span>数据概况</span></p>
      <section class="s6">
        <div>
          <p><span v-if="response">{{format_num(response.views)}}</span></p>
          <p>抖音访客量</p>
        </div>
        <!-- <div>
        <p>{{format_num(response.visitor)}}</p>
        <p>抖音访客量</p>
      </div> -->
        <div>
          <p><span v-if="response">{{format_num(response.volume)}}</span></p>
          <p>全网销量</p>
        </div>
        <div>
          <p><span v-if="response">{{formatRate(response.commissionRate,1,1)}}</span></p>
          <p>佣金比例</p>
        </div>
        <!-- <div>
          <p><span v-if="response">{{formatRate(response.conversionRatio/100,1,1)}}</span></p>
          <p>转化率</p>
        </div> -->
        <div>
          <p><span v-if="response">{{format_num(response.associatedVideo)}}</span></p>
          <p>关联视频数</p>
        </div>
        <div>
          <p><span v-if="response">{{format_num(response.associatedlive)}}</span></p>
          <p>关联直播数</p>
        </div>
        <div>
          <p><span v-if="response">{{format_num(response.views30Day)}}</span></p>
          <p>30天访客量</p>
        </div>
        <div>
          <p><span v-if="response">{{format_num(response.author30Day)}}</span></p>
          <p>30天热推达人</p>
        </div>
      </section>
      <button class="s7"><span>数据更新时间</span><span>{{time}}</span><img @click="reload"
             src="@/assets/wang/tdetails/refresh.png"></button>
      <section v-if="response">
        <button class="s8"
                v-if="!response.isCollect"
                @click="add_star(1,response.proId)"><img src="@/assets/meng/left02.png"><span>添加收藏</span></button>
        <button class="s9"
                v-else
                @click="add_star(0,response.proId)"><img src="@/assets/meng/left02.png"><span>取消收藏</span></button>
      </section>
    </template>
    <div v-loading="loading"
         v-if="loading"
         class="loading"
         element-loading-text="拼命加载中..."
         element-loading-spinner="el-icon-loading"></div>
  </div>
</template>
<script>
import SourceIcon from '@/component/SourceIcon.vue'
import VueQr from 'vue-qr'
export default {
  name: 'left',
  components: { VueQr, SourceIcon },
  data() {
    return {
      response: null,
      response01: null,
      is_show_s3: true,
      loading: true,
      time: '',
    }
  },
  props: ['id'],
  computed: {},
  created() {
    this.get_data()
  },
  mounted() {},
  methods: {
    reload() {
      this.get_data()
    },
    // 收藏
    add_star(flag, id) {
      let that = this
      if (flag) {
        this.$axios
          .post('/api/collection/InsertCollection', {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, 'isCollect', 1)
              // console.log(this.response)

              this.$message({
                message: '收藏成功！',
                type: 'success',
                duration: 2000,
              })
            } else {
              this.$message({
                message: '收藏失败！',
                type: 'error',
                duration: 2000,
              })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({
              message: '收藏失败！',
              type: 'error',
              duration: 2000,
            })
          })
      } else {
        this.$axios
          .post('/api/collection/CancelCollection', {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, 'isCollect', 0)
              this.$message({
                message: '取消收藏成功！',
                type: 'success',
                duration: 2000,
              })
            } else {
              this.$message({
                message: '取消收藏失败！',
                type: 'error',
                duration: 2000,
              })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({
              message: '取消收藏失败！',
              type: 'error',
              duration: 2000,
              // offset: '400',
            })
          })
      }
    },

    get_data() {
      let that = this
      this.loading = true
      this.$axios({
        method: 'get',
        url: '/api/product/info',
        params: {
          proId: that.id,
        },
      })
        .then((response) => {
          this.loading = false
          if (response.data.code == 0) {
            this.response = response.data.data
            this.time = this.timestamp(this.response.timeUnix, 'Y-M-D h:m:s')
            // console.log(this.response)
            this.$axios({
              method: 'get',
              url: '/api/shop/info',
              params: {
                shopId: response.data.data.proShop,
              },
            })
              .then((response01) => {
                if (response01.data.code == 0) {
                  this.response01 = response01.data.data
                  //   console.log(this.response01)
                }
              })
              .catch((error) => {
                console.log(error)
              })
          }
        })
        .catch((error) => {
          this.loading = false
          console.log(error)
        })
    },
    go_to_page01(parm) {
      let router = this.$router.resolve({
        path: `/talent_main/goodsListRoot/${parm.split('排')[0]}/${
          parm.split('排行榜')[1].split('第')[0]
        }`,
      })
      window.open(router.href, '_blank')
    },
  },
}
</script>
<style scoped lang='less'>
.loading {
  margin-top: 300px;
}
.s9 {
  img {
    width: 16px;
    height: 16px;
    display: none;
    margin-right: 6px;
  }
  span {
    margin-top: -1px;
  }
  background-color: #f5f5f5;
  border: solid 1px #e5e5e5;
  color: #888888;
  width: 150px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}
.s8 {
  img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  span {
    margin-top: -1px;
  }
  width: 150px;
  height: 48px;
  background-color: #f6a302;
  border-radius: 4px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  font-size: 16px;
  color: #ffffff;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
}
.s7 {
  cursor: auto;
  margin-top: 28px;
  width: 300px;
  height: 32px;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: solid 1px #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 13px;
  letter-spacing: 0px;
  > span:nth-child(1) {
    font-size: 14px;
    margin-top: -2px;
    letter-spacing: 0px;
    color: #888888;
  }
  > span:nth-child(2) {
    font-size: 16px;
    font-family: DINAlternate-Bold;
    letter-spacing: 0px;
    margin-top: 3px;
    color: #222;
  }
  img {
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
}
.s6 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  > div {
    width: 100px;
    text-align: center;
    margin-bottom: 25px;
    > p:nth-child(odd) {
      margin-bottom: 5px;
      color: #222222;
      font-size: 18px;
      font-family: DINAlternate-Bold;
    }
    > p:nth-child(even) {
      font-size: 14px;
      color: #888888;
    }
  }
}
.s5 {
  margin-bottom: 25px;
  margin-top: 28px;
  > div {
    height: 15px;
  }
  > span:nth-child(odd) {
    font-size: 14px;
    color: #888888;
  }
  > span:nth-child(even) {
    font-size: 14px;
    color: #fd7f2c;
    margin-right: 30px;
  }
}
.line {
  background-color: #e5e5e5;
  height: 1px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}
.s4 {
  color: #fd7f2c;
  font-size: 14px;
  margin-top: 30px;
  text-align: center;
  width: 100%;
  cursor: pointer;
  i {
    font-weight: bold;
  }
}
.s3 {
  max-height: 129px;
  overflow: hidden;
  button {
    background-color: #fff4ed;
    border-radius: 20px;
    margin-bottom: 14px;
    border: solid 1px #fd7f2c;
    padding: 6px 12px;
    display: block;
    color: #fd8a3e;
    font-size: 14px;
  }
}
.s2 {
  margin-bottom: 25px;
  > div {
    height: 15px;
  }
  > span:nth-child(odd) {
    font-size: 14px;
    color: #888888;
  }
  > span:nth-child(even) {
    font-size: 14px;
    color: #222222;
    margin-right: 30px;
  }
}
.s1 {
  margin-top: 23px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  .disable {
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    filter: grayscale(100%);
    filter: gray;
    opacity: 0.7;
  }

  > div:nth-child(1) {
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    margin-right: 20px;
    width: 80px;
    height: 80px;
    position: relative;
    > div {
      width: 80px;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 22px;
      line-height: 24px;
      color: #fff;
      background-color: #b5b5b5;
      font-size: 12px;
      text-align: center;
    }
    > img {
      width: 80px;
      height: 80px;
    }
  }
  > div {
    width: 194px;
    > p:nth-child(1) {
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
    }
    > p:nth-child(2) {
      display: flex;
      align-items: flex-end;
      > span:nth-child(1) {
        > span {
          font-size: 14px;
        }
        font-family: DINAlternate-Bold;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #ea1b0b;
        display: block;
        margin-bottom: -5px;
      }
      > span:nth-child(2) {
        margin-left: 2px;
        font-family: DINAlternate-Bold;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0px;
        color: #b5b5b5;
        text-decoration: line-through;
        display: block;
        margin-bottom: -4px;
      }
      > span:nth-child(3) img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
      > div:nth-child(4) {
        margin-left: 6px;
        display: inline-block;
      }
    }
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
.width_300 {
  width: 300px;
}
#left {
  width: 340px;
  height: fit-content;
  background-color: #ffffff;
  min-height: 100vh;
  border-radius: 6px;
  padding: 20px 20px 50px 20px;
  box-sizing: border-box;
}
</style>